<template>
    <div class="mt-[20px]">
        <CustomTitle title="生产分析" class="mb-[20px]"> </CustomTitle>
        <div
            class="!text-[16px] flex-col w-full h-[360px] overflow-y-auto text-[#E6E6E6] px-[20px] py-[20px] bg-[#1B1B1B] mt-[10px] rounded-[10px] items-center">
            <div class="w-full flex items-start">
                <div
                    class="title flex items-center flex-shrink-0 w-[140px] text-[14px] justify-center bg-[#242424] py-[7px] px-[6px]">
                    <span>分析项目</span>
                </div>
                <div class="ml-[30px]">
                    <div class="min-w-[140px] flex items-center justify-center bg-[#242424] py-[6px] px-[8px]">
                        <span class="!text-[14px]">{{ data.analysis_project }}</span>
                    </div>
                </div>
            </div>
            <div class="w-full flex items-start mt-[10px]">
                <div
                    class="title flex items-center flex-shrink-0 w-[140px] text-[14px] justify-center bg-[#242424] py-[7px] px-[8px]">
                    <span>取样点位</span>
                </div>
                <div class="ml-[30px]">
                    <a-space :size="15" wrap>
                        <div :key="index" v-for="(item, index) of data.sampling_point" @click="handleHistory(item)"
                            class="min-w-[140px] cursor-pointer flex items-center justify-center bg-[#242424] py-[7px] px-[8px]">
                            <span class="!text-[14px]">{{ getDisplayName(data.analysis_project, item) }}</span>
                        </div>
                    </a-space>
                </div>
            </div>
            <div v-if="imgUrl">
                <div class="my-[10px]">在线图谱</div>
                <img :src="imgUrl" class="w-full object-fill h-[320px]" alt="示例图" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const props = defineProps<{ data: any }>();
const imgUrl = ref('');
const router = useRouter();
const handleHistory = (record: any, status: string = '') => {
    router.push({
        // path: '/data_report/history_c/detail',
        name: 'data_report_history_id',
        query: { measurement: props.data.analysis_project, sampling_pt: record, status, ip: props.data.device_ip, port: props.data.device_port },
    });
};

onMounted(() => {
    if (props.data.type === 'GC') {
        imgUrl.value = `http://${props.data.device_ip}:${props.data.device_port}/images/spectrum.bmp`;
    } else {
        imgUrl.value = '';
    }
    // imgUrl.value = `https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oQ3ao.img?w=640&h=420&m=6&x=177&y=101&s=198&d=198`;
});

const nameMappings: { [key: string]: string } = {
    'NF3精馏组分分析取样点位1-预冷器进口': '预冷器出口',
    'NF3精馏组分分析取样点位2-预冷器出口': '精致(原料气)',
    'NF3精馏组分分析取样点位3-预冷器塔釜': '预冷器塔釜',
    'NF3精馏组分分析取样点位4-精馏低沸塔1出口': '预留',
    'NF3精馏组分分析取样点位9-精馏高沸塔3塔釜取样': '塔3塔釜',
    'NF3精制组分分析取样点位1-吸附剂吸附后': '塔2出口',
    'NF3精制组分分析取样点位2-吸附剂吸附后': '塔1出口',
    // 可以添加更多的映射
};

const getDisplayName = (project: string, item: string): string => {
    const key = `${project}${item}`;
    return nameMappings[key] || item;
};
</script>
<style lang="less" scoped>
.title {
    height: 35px;
    position: relative;

    &::before {
        height: 35px;
        content: '';
        width: 8px;
        height: 35px;
        position: absolute;
        background: #ff9f00;
        left: 0;
    }
}
</style>
